<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>麦粒熊绘本</title>
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_4803307_hsage5e3gw.css"
    />
    <link rel="stylesheet" href="../css/public.css" />
    <link rel="stylesheet" href="./list.css" />
    <input type="hidden" id="_w_simile" data-inspect-config="3" />
    <script
      type="text/javascript"
      src="chrome-extension://dbjbempljhcmhlfpfacalomonjpalpko/scripts/inspector.js"
    ></script>
  </head>
  <body>
    <header>
      <p class="search w100p rel ml-20 mt-10">
        <i class="iconfont icon-sousuo abs f14"></i>
        <input type="text" class="search-box" placeholder="了不起的面包怪" />
      </p>
      <nav class="navigation mt-10 mb-20 flex jc-sa">
        <a onclick="changeNav(1);" class="link active f18 f666 fw-b" href="#"
          >推荐</a
        >
        <a onclick="changeNav(2);" class="link f18 f666 fw-b" href="#">书单</a>
        <a onclick="changeNav(3);" class="link f18 f666 fw-b" href="#">全部</a>
      </nav>
    </header>
    <div style="height: 130px"></div>

    <!-- 轮播图 -->
    <div class="carousel" style="height: 215px;overflow: hidden;">
      <div class="swiper">
        <img
          src="../img/ban2.png"
          alt=""
          class="swiper-image"
          style="display: none"
        />
        <img
          src="../img/ban3.png"
          alt=""
          class="swiper-image"
          style="display: block"
        />
        <img
          src="../img/ban1.png"
          alt=""
          class="swiper-image"
          style="display: none"
        />
      </div>
      <!-- 圆点 -->
      <div class="swiper-dots">
        <div class="swiper-dot"></div>
        <div class="swiper-dot active"></div>
        <div class="swiper-dot"></div>
      </div>
    </div>

    <main>
      <div class="new-book">
        <p>新书驾到</p>
        <ul class="link flex aic jc-sa" id="new-book">
          <a
            href="./detail.html"
            class="item flex fdc aic pr-10 f14"
            data-id="10"
            id="10"
          >
            <img src="../img/book5.png" alt="" />
            <span>会消失的湖</span>
          </a>

          <li class="item flex fdc aic pr-10 f14" data-id="10" id="11">
            <img src="../img/book6.png" alt="" />
            <span>别让狐狸偷孩子</span>
          </li>

          <li class="item flex fdc aic pr-10 f14" data-id="10" id="12">
            <img src="../img/book7.png" alt="" />
            <span>别让闹钟吵醒我</span>
          </li>
        </ul>
      </div>
      <div class="best">
        <p>近期畅销</p>
        <ul class="link flex aic jc-sa" id="best">
          <li class="item flex fdc aic pr-10 f14" data-id="10" id="13">
            <img src="../img/book1.png" alt="" />
            <span>世界上最棒的...</span>
          </li>

          <li class="item flex fdc aic pr-10 f14" data-id="10" id="14">
            <img src="../img/book2.png" alt="" />
            <span>十二生肖的故事</span>
          </li>

          <li class="item flex fdc aic pr-10 f14" data-id="10" id="15">
            <img src="../img/book3.png" alt="" />
            <span>勇敢小火车</span>
          </li>
        </ul>
      </div>
      <div class="author">
        <a class="more w100p flex aic jc-sb" href="./nice-author.html">
          <p>优秀作者代表</p>
          <span class="f666 f14"
            >查看更多<i class="iconfont icon-xiangyoujiantou f14"></i
          ></span>
        </a>
        <ul class="link flex aic jc-sa" id="author">
          <li class="item flex fdc aic pr-10" id="1">
            <img src="../img/author1.png" alt="" />
            <span>赖马</span>
          </li>

          <li class="item flex fdc aic pr-10" id="2">
            <img src="../img/author2.png" alt="" />
            <span>埃尔维·杜莱</span>
          </li>

          <li class="item flex fdc aic pr-10" id="3">
            <img src="../img/author3.png" alt="" />
            <span>铃木典丈</span>
          </li>
        </ul>
      </div>
      <div class="award">
        <a class="more w100p flex aic jc-sb" href="./award.html">
          <p class="ml-5">国际大奖绘本界“奥斯卡”</p>
          <span class="f666 f14"
            >查看更多<i class="iconfont icon-xiangyoujiantou f14"></i
          ></span>
        </a>
        <ul class="link flex aic jc-sa" id="award">
          <li class="flex fdc aic pr-10" href="">
            <img src="../img/nbe1.png" alt="" />
            <span>信谊图画书奖</span>
          </li>
          <li class="flex fdc aic pr-10" href="">
            <img src="../img/nbe2.png" alt="" />
            <span>凯迪克大奖</span>
          </li>
          <li class="flex fdc aic" href="">
            <img src="../img/nbe3.png" alt="" />
            <span>国际安徒生奖</span>
          </li>
        </ul>
      </div>
      <div class="like w100p mt-5">
        <p class="ml-15">猜你喜欢</p>
        <ul class="link flex aic jc-sa fww" id="link">
          <li id="1" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/like1.png" alt="" />
            <span>大卫上学去</span>
          </li>

          <li id="2" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/like2.png" alt="" />
            <span>大卫惹麻烦</span>
          </li>

          <li id="3" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/like3.png" alt="" />
            <span>小蝴蝶飞越沧海</span>
          </li>

          <li id="4" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/like4.png" alt="" />
            <span>大排长龙：...</span>
          </li>

          <li id="5" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/like5.png" alt="" />
            <span>晚安，小蝴蝶</span>
          </li>

          <li id="6" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/like6.png" alt="" />
            <span>叽叽，小鸟...</span>
          </li>

          <li id="7" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/like7.png" alt="" />
            <span>思考世界的孩子</span>
          </li>

          <li id="8" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/like8.png" alt="" />
            <span>大卫，圣诞节到了</span>
          </li>

          <li id="9" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/like9.png" alt="" />
            <span>呼啦呼啦飞起来</span>
          </li>

          <li id="10" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/book5.png" alt="" />
            <span>会消失的湖</span>
          </li>

          <li id="11" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/book6.png" alt="" />
            <span>别让狐狸偷孩子</span>
          </li>

          <li id="12" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/book7.png" alt="" />
            <span>别让闹钟吵醒我</span>
          </li>

          <li id="13" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/book1.png" alt="" />
            <span>世界上最棒的...</span>
          </li>

          <li id="14" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/book2.png" alt="" />
            <span>十二生肖的故事</span>
          </li>

          <li id="15" class="item flex fdc aic mt-5 pb-10">
            <img src="../img/book3.png" alt="" />
            <span>勇敢小火车</span>
          </li>
        </ul>
      </div>
    </main>

    <div class="blank"></div>
    <footer class="bg-fff flex jc-sa fixed w100p">
      <!-- <a class="link active flex fdc aic jc-c f888" href="./index.html">
        <i class="iconfont icon-huibenyuedu f22"></i>
        <span class="pt-5 f12">绘本</span>
      </a>
      <a class="link flex fdc aic jc-c f888" href="./bookshelf.html">
        <i class="iconfont icon-wodeshujia f22"></i>
        <span class="pt-5 f12">书架</span>
      </a>
      <a class="link flex fdc aic jc-c f888" href="./discover.html">
        <i class="iconfont icon-faxian f22"></i>
        <span class="pt-5 f12">发现</span>
      </a>
      <a class="link flex fdc aic jc-c f888" href="./my.html">
        <i class="iconfont icon-gerenzhongxin f22"></i>
        <span class="pt-5 f12">我的</span>
      </a> -->
    </footer>

    <script src="../js/axios.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/common.js"></script>
  </body>
</html>
